<template>
  <div class="container" :style="scaleStyle">
    <div class="container_top">
      <div class="topleft">
        <div class="normalbutton" style="width:110px;" @click="$router.back()">返回</div>
      </div>
      <p>{{ cityname }}.学生画像</p>
      <div class="topright">
        <div>
          统计时间：
          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localYear"
                     :popper-append-to-body="false">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="selectbox"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="container_body">
      <div class="flexbetween" style="width:100%;">
        <div class="leftbox" style="margin-right:20px;">
          <div class="maintitle" style="background: none"><p>相关信息</p></div>
          <div class="midbody">
            <div class="midcontent" style="left:5px;">
              <div class="midinfobox1" style="margin-top:40px; animation: cloud 1s 2s ease-in infinite alternate;">
                <div class="flexlist" style="height: 140px;width:300px; margin-left: 240px;">
                  <p class="normaltxt midtxt" style="margin-top:10px;"><span class="keyblue">房产信息：</span></p>
                  <p class="normaltxt" style="margin-left: 10px;">房产所有人:{{ data.house.fullNameFc }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">登记时间:{{ data.house.registerDate }}
                  <p class="normaltxt" style="margin-left: 10px;">地址:{{ data.house.address }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">所属学区:{{ data.house.schooldistrict }}</p>
                </div>
              </div>
              <div class="midinfobox2" style="animation: cloud 1.5s 1.5s ease-in infinite alternate;">
                <div class="flexlist" style="height: 120px;width:300px; margin-left: 240px;">
                  <p class="normaltxt midtxt" style="margin-top:10px;"><span class="keyblue">居住证信息：</span></p>
                  <p class="normaltxt" style="margin-left: 10px;">姓名:{{ data.codeinfo.xm }}
                    登记日期：{{ data.codeinfo.djrq }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">地址:{{ data.codeinfo.dz }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">所属学区:{{ data.codeinfo.ssxq }}</p>
                </div>
              </div>
            </div>
            <div class="midcontent" style="right:5px;">
              <div class="midinfobox3" style="margin-top:40px;animation: cloud 1s 2s ease-in infinite alternate;">
                <div class="flexlist" style="height: 160px;width:300px;margin-left:180px;">
                  <p class="normaltxt midtxt" style="margin-top:10px;"><span class="keyblue">父母参保情况：</span></p>
                  <p class="normaltxt" style="margin-left: 10px;">姓名:{{ data.family.xm }} </p>
                  <p class="normaltxt" style="margin-left: 10px;">参保单位:{{ data.family.cbdw }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">参保险种:{{ data.family.cbxz }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">参保开始时间:{{ data.family.cbkssj }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">参保状态:{{ data.family.ckzt }}</p>
                </div>
              </div>
              <div class="midinfobox4" style="animation: cloud 1.5s 1.5s ease-in infinite alternate;">
                <div class="flexlist" style="height: 150px;width:300px;margin-left:180px;">
                  <p class="normaltxt midtxt" style="margin-top:10px;"><span class="keyblue">户籍信息：</span></p>
                  <p class="normaltxt" style="margin-left: 10px;">姓名:{{ data.room.fullName }} </p>
                  <p class="normaltxt" style="margin-left: 10px;">性别:{{ data.room.sex }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">籍贯:{{ data.room.householdPlace }}</p>
                  <p class="normaltxt" style="margin-left: 10px;">户口所在地:{{ data.room.address }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sidebox" style="margin-right:50px">
          <div class="maintitle"><p>预报名信息</p></div>
          <div class="mainbox" style="height:270px;">
            <div class="mainbox_content">
              <div class="flexbetween">
                <div class="ybmbox">
                  <p class="ybmval "><span>{{ data.preenrollinfo.length }}所</span></p>
                  <p class="normaltxt" style="margin-top:-20px;">预报名学校</p>
                </div>
                <div class="flexlist" style="flex:1; margin-left:10px;">
                  <div class="tjbox2" style="width:100%;" v-for="(item,index) in data.preenrollinfo" :key="index">
                    <p class="normaltxt">{{ item.schoolName }}<span class="keyblue" style="font-size:16px; font-weight: normal">{{item.configName}}类</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="maintitle"><p>报名信息</p></div>
          <div class="mainbox" style="height:270px;">
            <div class="mainbox_content">
              <div class="flexlist" style="height:240px; justify-content: center">
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">姓名:</span>{{data.baseinfodata.fullName}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">性别:</span>{{data.baseinfodata.sex}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">年龄:</span>{{data.baseinfodata.nl}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">籍贯:</span>{{data.baseinfodata.householdPlace}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">户籍地址:</span>{{data.baseinfodata.address}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">报名学校:</span>{{ data.baseinfodata.schoolName}} </p>
              </div>
            </div>
          </div>
          <div class="maintitle"><p>基础信息</p></div>
          <div class="mainbox" style="height:270px;">
            <div class="mainbox_content">
              <div class="flexlist" style="height:240px; justify-content: center">
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">报名学校:</span>{{data.enrollinfo.schoolName}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">学校类型:</span>{{data.enrollinfo.schoolCategory}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">学校属性:</span>{{data.enrollinfo.schoolNature}}</p>
                <p class="normaltxt" style="line-height: 36px;"><span class="keyblue" style="font-size:14px; font-weight: normal">报名状态:</span>{{data.enrollinfo.enrollStatus }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import autoPage from '../utils/autoPage'
import VChart from 'vue-echarts'
import rollNum from '../components/rollNum'

export default {
  name: 'yubaom',
  components: {
    VChart,
    rollNum
  },
  extends: autoPage,
  data () {
    return {
      cityname: '东阳市',
      localYear: '2022',
      yearList: [
        {label: '2022年', value: '2022'},
        {label: '2021年', value: '2021'},
        {label: '2020年', value: '2020'},
        {label: '2019年', value: '2019'},
        {label: '2018年', value: '2018'}
      ],
      data: {
        baseinfodata: {// 基础信息
        },
        enrollinfo: {// 报名信息
        },
        preenrollinfo: [ // 预报名信息
          // {name: '吴宁中心小学', type: 'A'},
          // {name: '吴宁第二小学', type: 'A'},
          // {name: '吴宁阳光小学', type: 'B'},
          // {name: '吴宁第三小学', type: 'A'},
          // {name: '吴宁第四小学', type: 'A'}
        ],
        family: {
          xm: '--',
          cbdw: '--',
          cbxz: '--',
          cbkssj: '--',
          ckzt: '--'
        },
        room: {
          fullName: '--',
          sex: '--',
          address: '--',
          householdPlace: '--'
        },
        house: {
          fullNameFc: '--',
          address: '--',
          registerDate: '--',
          ssxq: '--'
        },
        codeinfo: {
          xm: '--',
          djrq: '--',
          dz: '--',
          ssxq: '--'
        }
      }

    }
  },
  computed: {},
  methods: {
    getData (idCard, year) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0028',
        data: {
          year: year,
          idCard: idCard
        }
      }).then((res) => {
        const result = res.result
        console.log('result = ', result)
        // 房产信息
        if (result.stuXshxFcVO) {
          this.data.house = result.stuXshxFcVO
        }
        // 父母参保情况
        if (result.stuXshxFmcbqkVO) {
          this.data.family = result.stuXshxFmcbqkVO
        }
        // 户籍信息
        if (result.stuXshxHjxxVO) {
          this.data.room = result.stuXshxHjxxVO
        }
        // 居住证信息
        if (result.stuXshxJzzxxVO) {
          this.data.codeinfo = result.stuXshxJzzxxVO
        }
        // 预报名信息
        if (result.stuXshxYbmhzVO) {
          this.data.preenrollinfo = result.stuXshxYbmhzVO.stuXshxYbmList
        }
        // 报名信息
        if (result.stuXshxBmVO) {
          this.data.baseinfodata = result.stuXshxBmVO
        }
        // 基础信息
        if (result.stuXshxJcxxVO) {
          this.data.enrollinfo = result.stuXshxJcxxVO
        }
        console.log('this.data = ', this.data)
      })
    }
  },
  mounted () {
    console.log('this.$route.query = ', this.$route.query)
    this.getData(this.$route.query.idcard, this.$route.query.year)
  },
  created () {
  },
  watch: {}
}
</script>

<style scoped lang="less">

.container {
  position: relative;
  background: url(../assets/img/page/studentbg.svg) no-repeat left top #020317;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &_top {
    width: 100%;
    height: 72px;
    background: url("../assets/img/page/titlebg.svg") no-repeat left top /100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      width: 516px;
      height: 40px;
      margin-left: 20px;
      display: flex;

      p {
        width: 138px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #53E2FF;
        letter-spacing: 0.96px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #B4F2FF;
          font-weight: bold;
        }
      }
    }

    .topright {
      width: 516px;
      margin-right: 20px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    p {
      flex: 1;
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  &_body {
    width: 100%;
    height: 960px;
    padding: 24px;
    display: flex;
    position: relative;

    .infobox {
      width: 450px;
      position: absolute;
      top: 150px;
      right: 490px;
      z-index: 99999;

      &_top {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left top;

        .infotitle {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          font-weight: bold;

          &:before {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-right: 15px;
            background: url(../assets/img/page/titleleft.svg) no-repeat left center;
            animation: cubeshow1 3s linear infinite forwards;
          }

          &:after {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
            background: url(../assets/img/page/titleright.svg) no-repeat right center;
            animation: cubeshow2 3s linear infinite forwards;
          }
        }
      }

      &_body {
        min-height: 300px;
        background: rgba(3, 46, 82, 0.80);
        padding: 20px;
      }

      &_bottom {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
        margin-top: -1px;
      }
    }

    .leftbox {
      flex: 1;
      height: 960px;
      background: url("../assets/img/page/midbg.svg") no-repeat center top;
      animation: cloud 2s 2s ease-in infinite alternate;
      position: relative;

      .midbody {
        position: relative;

        .midcontent {
          width: 50%;
          position: absolute;
          top: 0;

          .midinfobox1 {
            height: 160px;
            margin-top: 40px;
            background: url("../assets/img/page/left1.svg") no-repeat center right;
          }

          .midinfobox2 {
            height: 143px;
            margin-top: 40px;
            background: url("../assets/img/page/left2.svg") no-repeat center right;
          }

          .midinfobox3 {
            height: 204px;
            margin-top: 40px;
            background: url("../assets/img/page/right1.svg") no-repeat center left;
          }

          .midinfobox4 {
            height: 174px;
            margin-top: 40px;
            background: url("../assets/img/page/right2.svg") no-repeat center left;
          }
        }
      }
    }

    .sidebox {
      width: 450px;
      height: 960px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

    .bmap {
      width: 1500px;
      height: 100%;
      position: absolute;
      left: 210px;
      top: 0;
      z-index: 1;
    }

    .midbox {
      flex: 1;
      margin: 0 24px;
      position: relative;
      z-index: 2;

      .mapcontrolbox {
        position: absolute;
        left: 10px;
        top: 180px;

        p {
          line-height: 36px;
          font-size: 14px;
          color: #FFFFFF;
          letter-spacing: 0.84px;
          cursor: pointer;

          &.blue {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(14, 45, 80, 0.5);
              border: 1px solid rgba(52, 178, 255, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(14, 45, 80, 0.5);
                border: 1px solid rgba(52, 178, 255, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(52, 178, 255, 1)
              }
            }
          }

          &.yellow {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(63, 46, 32, 0.5);
              border: 1px solid rgba(255, 185, 54, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(63, 46, 32, 0.5);
                border: 1px solid rgba(255, 185, 54, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(255, 185, 54, 1)
              }
            }
          }

          &.red {
            &:before {
              content: '';
              width: 14px;
              height: 14px;
              background: rgba(67, 0, 0, 0.5);
              border: 1px solid rgba(255, 0, 0, 1);
              display: inline-block;
              vertical-align: middle;
              margin-right: 10px;
            }

            &.active {
              &:before {
                content: '✔';
                width: 14px;
                height: 14px;
                line-height: 14px;
                text-align: center;
                background: rgba(67, 0, 0, 0.5);
                border: 1px solid rgba(255, 0, 0, 1);
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                color: rgba(255, 0, 0, 1)
              }
            }
          }
        }
      }

      .mapbigbox {
        width: 100%;
        height: 32px;
        position: absolute;
        left: 0;
        bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;

        div {
          width: 100px;
          background: #0D2246;
          border: 1px solid rgba(7, 124, 220, 1);
          border-radius: 16px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;

          &:hover {
            border: 1px solid #53E2FF;
          }

          p {
            width: 32px;
            height: 32px;
            line-height: 27px;
            margin-left: 12px;
            margin-right: 12px;
            text-align: center;
            color: rgba(7, 124, 220, 1);
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;

            &:hover {
              color: #53E2FF
            }
          }
        }
      }

      .schoolcontrolbox {
        width: 100%;
        height: 40px;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        p {
          width: 158px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          cursor: pointer;

          &.active {
            font-size: 16px;
            background-image: linear-gradient(to bottom, #fff, #B6EAFF);
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: 0.96px;
            font-weight: bold;
          }
        }

        &.school0 {
          background: url(../assets/img/page/school0.svg) no-repeat left bottom;
        }

        &.school1 {
          background: url(../assets/img/page/school1.svg) no-repeat left bottom;
        }

        &.school2 {
          background: url(../assets/img/page/school2.svg) no-repeat left bottom;
        }

      }

      .mapname {
        background: url("../assets/img/page/mapdot.svg") no-repeat left center;
        padding-left: 40px;

        p {
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 1.2px;
          background-image: linear-gradient(to bottom, #fff, #B6EAFF);
          -webkit-background-clip: text;
          color: transparent;
        }
      }

      .midtopbox {
        width: 100%;
        height: 104px;
        background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

        .midtopcontent {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .popbox {
    width: 450px;
    height: 768px;
    background: url("../assets/img/page/popbg.svg") no-repeat left top;
    position: absolute;
    top: 220px;
    left: 600px;
    z-index: 99;

    &_content {
      height: 730px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .popboxtitle {
        line-height: 32px;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.84px;
      }

      .poptitlebox {
        height: 64px;
        background: url("../assets/img/page/popdot1.svg") no-repeat left center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 75px;
        position: relative;

        .poptype {
          width: 46px;
          height: 20px;
          line-height: 20px;
          background: #F07700;
          border-radius: 4px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          margin-right: 15px;
        }

        .poptitle {
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 1.2px;
          background-image: linear-gradient(to bottom, #fff, #B6EAFF);
          -webkit-background-clip: text;
          color: transparent;
        }

        .topopinfo {
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          position: absolute;
          right: 0;
          background: url("../assets/img/page/toinfo.svg") no-repeat right center;
          padding-left: 15px;
          padding-right: 20px;
          text-align: right;
        }
      }

      .tjbox1 {
        width: 200px;
        height: 146px;
        background: url("../assets/img/page/tjbg1.svg") no-repeat left top;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        p {
          font-size: 14px;
          color: #fff;

          &.tjval {
            height: 70px;
            width: 100%;
            text-align: center;
            background: url("../assets/img/page/dotbottom.svg") no-repeat center bottom;
          }

          span {
            font-size: 20px;
            //color: #53E2FF;
            letter-spacing: 1.2px;
          }
        }
      }
    }
  }
}

.ybmval {
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1.2px;
  background-image: linear-gradient(to bottom, #fff, #B6EAFF);
  -webkit-background-clip: text;
  color: transparent;
}

.ybmbox {
  width: 200px;
  height: 240px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-image: url("../assets/img/page/ybmbox.svg"), url("../assets/img/page/ybmboxbg.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, center 40%;
}

.tjbox2 {
  width: 100%;
  height: 40px;
  background: rgba(7, 124, 220, .12);
  border-top: 1px solid rgba(7, 124, 220, 0.24);
  border-bottom: 1px solid rgba(7, 124, 220, 0.24);
  position: relative;
  display: flex;

  &:before {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    left: 0;
    top: -1px;
    background: #077CDC;
  }

  &:after {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: -1px;
    background: #077CDC;
  }

  p {
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    padding-left: 10px;

    span {
      font-size: 20px;
      font-weight: bold;
      color: #53E2FF;
      letter-spacing: 0.8px;
    }

    b {
      font-size: 14px;
      font-weight: normal;
      color: #53E2FF;
    }
  }
}

.normalbutton {
  width: 72px;
  height: 32px;
  line-height: 32px;
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #53E2FF;
  letter-spacing: 0.84px;
  cursor: pointer;
}

.maintitle {
  width: 100%;
  height: 32px;
  background: url("../assets/img/page/maintitle.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }

    &:after {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      background: url(../assets/img/page/titleright.svg) no-repeat right center;
      animation: cubeshow2 3s linear infinite forwards;
    }
  }
}

@keyframes cubeshow2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
    //  transform: rotate(0) scale(1);
  }
}

@keyframes cubeshow1 {
  0% {
    opacity: 0;
    transform: translateX(10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
    //  transform: rotate(0) scale(1);
  }
}

.mainbox {
  width: 100%;
  height: 190px;
  background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

  &_content {
    padding: 0 16px;
  }
}

.listbox {
  width: 50%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.listbox0 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox1 {
    background: url("../assets/img/page/pdot2.svg") no-repeat left center;
  }

  &.listbox2 {
    background: url("../assets/img/page/pdot3.svg") no-repeat left center;
  }

  &.listbox3 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  p {
    margin-left: 85px;

    &.listval {
      line-height: 42px;
      font-size: 24px;
      color: #53E2FF;
      letter-spacing: 1.44px;
      font-weight: bold;
    }

    &.listname {
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
    }
  }

}

.yzjzbox {
  width: 100%;
  margin: 0 auto;
  height: 190px;
  position: relative;

  p {
    text-align: center;
  }

  .yzjzcircle {
    width: 118px;
    height: 118px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /118px 118px;
    position: absolute;
    left: 39px;
    top: 30px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle1 {
    width: 80px;
    height: 80px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /80px 80px;
    position: absolute;
    left: 27px;
    top: 25px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle2 {
    width: 64px;
    height: 64px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /64px 64px;
    position: absolute;
    left: 20px;
    top: 14px;
    animation: rotate1 3s linear infinite forwards;
  }
}

.flexlist {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.normaltxt {
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.84px;

  span {
    font-size: 16px;
    letter-spacing: 0.96px;
    font-weight: bold;
    padding: 0 10px;

    &.keyyellow {
      color: #FFB936;
    }

    &.up {
      background: url("../assets/img/page/dotup.svg") no-repeat left center;
      padding-left: 20px;
    }

    &.keyblue {
      color: #53E2FF;
    }
  }
}

.xuexiaolistbox {
  width: 136px;
  height: 40px;
  line-height: 40px;
  background: #0D2246;
  border: 1px solid rgba(1, 66, 120, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 2px;
  cursor: pointer;

  &.active {
    border: 1px solid rgba(83, 226, 255, 1);
  }

  p {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
  }
}

.sortbox {
  width: 80%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;

  p {
    cursor: pointer;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 0.56);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

    &.active:before {
      content: '✔';
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      color: #53E2FF;
      background: #0D2246;
      border: 1px solid rgba(83, 226, 255, 1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.flexbetween {
  display: flex;
  justify-content: space-between;
}

.flexbox {
  display: flex;
  align-items: center;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrap-table {
  width: 100%;
  border-spacing: 0
}

.wrap-table table {
  width: 100%;
  table-layout: fixed;
}

.wrap-table.head tr th {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: rgba(7, 124, 220, .24);
}

.wrap-table.body tr {
  td {
    font-size: 14px;
    padding: 8px 2px;
    text-align: center;
    letter-spacing: 0.84px;
    color: rgba(255, 255, 255, .72);
    background: rgba(7, 124, 220, .12);

    .progressbox1 {
      width: 180px;
      height: 12px;
      background: rgba(7, 124, 220, .12);
      position: relative;
      margin-right: 10px;
      margin-top: 5px;

      .progresscurbox {
        height: 4px;
        position: absolute;
        left: 4px;
        top: 4px;
        background: rgba(4, 193, 255, 1);

        &.progress0 {
          background: #FFB936;
        }
      }
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.sortN0 {
        color: #FFB936;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          content: 'NO.';
          display: inline-block;
          vertical-align: middle;
        }
      }

      &.yellowkey {
        color: #FFB936;
      }
    }
  }

  &:nth-child(odd) {
    td {
      background: rgba(7, 124, 220, .04);
    }
  }

}

.wrap-table.body tr td.keyblue {
  font-size: 14px;
  color: #05D7FF;
  font-weight: 600;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/*下拉框*/
/deep/ .el-input {
  font-size: 16px;
  color: #FFFFFF;
}

/deep/ .el-input__inner {
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  color: #53E2FF;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: #53E2FF;
  }
}

/deep/ .el-select-dropdown__item {
  color: #fff;
}

/deep/ .el-select:hover .el-input__inner {
  border-color: #6ABEFF
}

/deep/ .el-select-dropdown {
  background: rgba(3, 32, 64, 0.80);
  border: 1px solid rgba(61, 82, 103, 1);
  border-radius: 8px;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

/deep/ .el-popper .popper__arrow::after {
  border-width: 0;
}

/deep/ .el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: transparent;
}

/deep/ .el-select-dropdown__item.selected {
  background: rgba(106, 190, 255, 0.16);
  color: #6ABEFF;
  font-weight: normal;
}

/deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover {
  background: rgba(106, 190, 255, 0.16);
}

/deep/ .el-radio {
  font-size: 16px;
  color: #53E2FF;
  letter-spacing: 0.96px;
}
</style>
